<template>
	<view class="exit-popup-overlay" v-if="visible" @click="handleOverlayClick">
		<view class="exit-popup-content" @click.stop>
			<view class="exit-popup-title">{{ title }}</view>
			<view class="exit-popup-message">{{ message }}</view>
			<view class="exit-popup-buttons">
				<view class="exit-popup-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
				<view class="exit-popup-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件属性
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '确定退出?'
	},
	message: {
		type: String,
		default: '退出后,将不再能够进入该场次;同时所支付的答题费用将无法以原路径返还,而是直接返还至小程序余额中!'
	},
	confirmText: {
		type: String,
		default: '确定'
	},
	cancelText: {
		type: String,
		default: '取消'
	}
})

// 定义组件事件
const emit = defineEmits(['confirm', 'cancel', 'update:visible'])

// 处理确认按钮点击
const handleConfirm = () => {
	emit('confirm')
	emit('update:visible', false)
}

// 处理取消按钮点击
const handleCancel = () => {
	emit('cancel')
	emit('update:visible', false)
}

// 处理遮罩层点击
const handleOverlayClick = () => {
	emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
/* 退出确认弹窗样式 */
.exit-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.exit-popup-content {
	background: white;
	border-radius: 24rpx;
	padding: 48rpx 0;
	width: 600rpx;
	max-width: 90vw;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
    padding-bottom: 0;
}

.exit-popup-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #000;
	text-align: center;
	margin-bottom: 32rpx;
}

.exit-popup-message {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 32rpx;
    padding: 0 32rpx;
}

.exit-popup-buttons {
	display: flex;
	justify-content: space-between;
    border-top: 1px solid #E5E5E5;
}

.exit-popup-btn {
	flex: 1;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.confirm-btn {
	color: #666;
}

.confirm-btn:active {
	background: #333;
}

.cancel-btn {
	background: transparent;
	color: #0F50DC;
	border-left: 1rpx solid #E5E5E5;
}

.cancel-btn:active {
	background: #F5F5F5;
}
</style>
